import React, { Component } from 'react'
// 引入actions 
import { addProAction, addProActionAsync, getSchoollistAsync } from '../../store3/actions/shopAction'

// 实现store仓库的全局化
// 步骤1: 引入connect 这个高阶组件函数 hoc
import { connect } from 'react-redux'

class Father extends Component {
    render() {
        return (
            <div>
                {/* 商品模块 */}
                <ul>
                    {
                        this.props.shop.prolist.map(item => <li key={item.id}>{item.name}</li>)
                    }
                </ul>
                <p>pronum: {this.props.shop.pronum}</p>
                <p>
                    <button onClick={() => {
                        this.props.addPronumFn(2)
                    }}>同步+2</button>
                    <button onClick={() => {
                        this.props.addPronumAsyncFn(2)
                    }}>异步+2</button>
                </p>

                {/* 学校列表 */}
                <ul>
                    {
                        this.props.shop.schoollist.map(item => <li key={item.id}>{item.school_name}</li>)
                    }
                </ul>
            </div>
        )
    }
    componentDidMount() {
        // 初始化获取学校列表
        this.props.getSchoolListAsyncFn()
    }
}


// 步骤2: 定义两个映射函数.. 相当于vuex 中得mapState,MapActions
// 将store仓库中的state数据映射到当前组件自身的实例的props 属性上
function mapStateToProps(state) {
    return state
}

// 将 addPronum 等修改state数据的事件方法映射到当前组件自身的实例的props属性上
function mapActionToProps(dispatch) {
    return {
        addPronumFn(num) {
            // 同步的增加num
            dispatch(addProAction(num))
        },
        addPronumAsyncFn(num) {
            // 调用异步的acion
            dispatch(addProActionAsync(num))
        },
        getSchoolListAsyncFn() {
            dispatch(getSchoollistAsync())
        }
    }
}

export default connect(mapStateToProps, mapActionToProps)(Father)


// 使用react-redux 实现仓库数据的全局化步骤:
// 01: 需要下载这个react-redux ; npm i react-redux
// 02:在项目的入口文件中index.js; import {Provider} from  'react-redux'
// <Provider store= {store}><App/></Provider>
// 03:在页面中使用 import {connect} from 'react-redux'
// 04: 定义两个映射函数 mapStateToProps  mapActionToProps
// 05:就可以通过 this.props 访问数据state 和操作数据state的方法

